import { Component, OnInit, Input } from '@angular/core';
import { v4 as uuid4 } from 'uuid'

export interface todo {
  id: String,
  title: String
}

// export interface todoList {
//   todoList: todo[]
// }

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: [
    './todos.component.css'
  ]
})

export class TodosComponent implements OnInit {
  list: todo[] = []
  text: String = ''

  constructor() {

  }

  ngOnInit(): void {
  }

  onKeyUp(e: Event) {
    if (!this.text.trim()) return
    const ex = {
      id: uuid4(),
      title: (<HTMLInputElement>e.target).value.trim()
    }
    this.list.push(ex)
    this.text = ''
  }

  onClick() {
    if (!this.text.trim()) return
    const ex = {
      id: uuid4(),
      title: this.text.trim()
    }
    this.list.push(ex)
    this.text = ''
  }

  onDelete(id: String) {
    this.list = this.list.filter(item => item.id !== id)
  }
}
